<!-- 课程发布 - 基础设置 -->
<template>
    <el-form ref="formRef" :disabled="isDetail" :model="formData" :rules="rules" label-width="120px" class="w-50%">
        <el-form-item label="课程名称" prop="name">
            <el-input v-model="formData.name" :maxlength="50" placeholder="请输入课程名称" />
        </el-form-item>
        <el-form-item label="课程分类" prop="categoryId">
            <el-cascader v-model="formData.categoryId" :options="categoryList" :props="defaultProps" class="w-100%"
                clearable filterable placeholder="请选择课程分类" />
        </el-form-item>
        <!-- <el-form-item label="活动时间">
            <el-date-picker type="datetimerange" v-model="formData.activityTime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择活动时间"/>
        </el-form-item> -->
        <!-- 需要更改为多选 -->
        <el-form-item label="课程标签" prop="brandId">
            <el-select v-model="formData.brandId" multiple placeholder="请选择课程标签">
                <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id as number" />
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="课程关键字" prop="keyword">
            <el-input v-model="formData.keyword" placeholder="请输入课程关键字" />
        </el-form-item> -->
        <el-form-item label="课程排序" prop="sort">
            <el-input-number v-model="formData.sort" :min="0" :max="999" />
        </el-form-item>
        <el-form-item label="课程简介">
            <el-input v-model="formData.introduction" :autosize="{ minRows: 2, maxRows: 4 }" :clearable="true" :show-word-limit="true" maxlength="128" placeholder="请输入课程简介" type="textarea" />
        </el-form-item>
        <!-- <el-form-item label="课程次数" prop="count">
            <el-input-number :controls="false" v-model="formData.count" placeholder="请输入课程次数" />
        </el-form-item> -->

        <el-form-item label="课程封面图" prop="picUrl">
            <UploadImg v-model="formData.picUrl" :disabled="isDetail" height="80px" />
        </el-form-item>
        <el-form-item label="课程视频" prop="video">
            <UploadFile
                v-model="formData.video"
                :fileType="['video']"
                :fileSize="100"
                :limit="1"
                :disabled="isDetail" />
        </el-form-item>
        <el-form-item label="课程详情图" prop="sliderPicUrls">
            <UploadImgs v-model="formData.sliderPicUrls" :disabled="isDetail" />
        </el-form-item>
    </el-form>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import { defaultProps, handleTree } from '@/utils/tree'
import type { Spu } from '@/api/mall/product/spu'
import * as ProductCategoryApi from '@/api/mall/product/category'
import { CategoryVO } from '@/api/mall/product/category'
import * as ProductBrandApi from '@/api/mall/product/brand'
import { BrandVO } from '@/api/mall/product/brand'

defineOptions({ name: 'ProductSpuInfoForm' })
const props = defineProps({
    propFormData: {
        type: Object as PropType<Spu>,
        default: () => { }
    },
    isDetail: propTypes.bool.def(false) // 是否作为详情组件
})

const message = useMessage() // 消息弹窗

const formRef = ref() // 表单 Ref
const formData = reactive<Spu>({
    name: '', // 课程名称
    categoryId: undefined, // 课程标签
    keyword: '', // 关键字
    picUrl: '', // 课程封面图
    video: '', // 课程视频
    sliderPicUrls: [], // 课程详情图
    sort: undefined, // 课程排序
    introduction: '', // 课程简介
    brandId: [] // 课程标签
})
const rules = reactive({
    name: [required],
    categoryId: [required],
    keyword: [required],
    sort: [required],
    introduction: [required],
    picUrl: [required],
    // sliderPicUrls: [required],
    brandId: [required]
})

/** 将传进来的值赋值给 formData */
watch(
    () => props.propFormData,
    (data) => {
        if (!data) {
            return
        }
        copyValueToTarget(formData, data)
    },
    {
        immediate: true
    }
)

/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
    if (!formRef) return
    try {
        await unref(formRef)?.validate()
        // 校验通过更新数据
        Object.assign(props.propFormData, formData)
    } catch (e) {
        message.error('【基础设置】不完善，请填写相关信息')
        emit('update:activeName', 'info')
        throw e // 目的截断之后的校验
    }
}
defineExpose({ validate })

/** 初始化 */
const brandList = ref<BrandVO[]>([]) // 课程品牌列表
const categoryList = ref<CategoryVO[]>([]) // 课程标签树
onMounted(async () => {
    // 获得分类树
    const data = await ProductCategoryApi.getCategoryList({})
    categoryList.value = handleTree(data, 'id')
    // 获取课程品牌列表
    brandList.value = await ProductBrandApi.getSimpleBrandList()
})
</script>
